<script setup>
import { useEcharts, echartsObj } from '../composables/useEcharts';
import { onMounted, ref } from 'vue';
import axios from 'axios';
const dataFour = ref({})
const fourChart = ref(null)

const getData = async () => {
  const res = await axios.get('/four/data')
  dataFour.value = res.data.chartFour.chartData
}

onMounted(() => {
  getData().then(() => {
    const echartsInstance = useEcharts(fourChart.value)
    echartsInstance.setOption({
      grid:{
        left:"3%",
        right:"4%",
        bottom:"3%",
        containLabel:true
      },
      xAxis:{
        type:"category",
        data:dataFour.value.day,
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      tooltip:{
        trigger:"axis", // 触发类型
        axisPointer:{
          type:"shadow" // 指示器类型
        }
      },
      legend:{},
      yAxis:{
        type:"value",
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      series:[
        {
          name:"药品",
          type:"bar",
          data:dataFour.value.num.Chemicals,
          stack:"total",
          label:{show:true},
          emphasis:{
            focus:"series"
          }
        },
        {
          name:"服饰",
          type:"bar",
          data:dataFour.value.num.Clothes,
          stack:"total",
          label:{show:true},
          emphasis:{
            focus:"series"
          }
        },
        {
          name:"家电",
          type:"bar",
          data:dataFour.value.num.Electrical,
          stack:"total",
          label:{show:true},
          emphasis:{
            focus:"series"
          }
        },
        {
          name:"数码",
          type:"bar",
          data:dataFour.value.num.digit,
          stack:"total",
          label:{show:true},
          emphasis:{
            focus:"series"
          }
        },
        {
          name:"装备",
          type:"bar",
          data:dataFour.value.num.gear,
          stack:"total",
          label:{show:true},
          emphasis:{
            focus:"series"
          }
        }
      ]
    })
  })
})

</script>

<template>
  <div>
    <h2>库存统计图</h2>
    <div class="chart" ref="fourChart"></div>
  </div>
</template>

<style scoped lang="less">
.chart{
  height: 4.5rem;
}
h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>
